﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@4.8.0/dist/echarts.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery"></script>
    <style>
        ul, li {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        .flex {
            display: flex;
            flex-direction: column;
        }

        .c1 {
            background-color: black;
        }

        .c2 {
            background-color: coral;
        }

        .c3 {
            background-color: darkcyan;
        }

        .c4 {
            background-color: darkgrey;
        }

        .main {
            width: 100%;
            height: 600px;
            background-color: aqua;
            display: flex;
            flex-direction: column;
        }

        .top,
        .bottom {
            flex: 1;
            background-color: yellow;
            display: flex;
        }

        .bottom {
            background-color: bisque;
        }

        .item {
            flex: 1;
            padding: 20px;
        }

        .item-top,
        .item-bottom {
            flex: 1;
        }

        .pr {
            position: relative;
        }

        .pa {
            position: absolute;
            right: 50px;
            top: 10px;
        }

        .dialog {
            width: 440px;
            height: 100px;
            background-color: #fff;
            position: absolute;
            top: 50px;
            right: 50px;
            display: none;
        }

        .dialog-ul li {
            float: left;
            width: 33%;
            text-align: center;
            height: 100px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            /* padding-top: 50px; */
        }
        .dialog-ul li p {
            margin: 0;
            padding: 0;
            flex:1;
            line-height: 50px;
        }
    </style>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div class="pr" style="height:70px;background-color: black;width :100%; text-align: center; line-height: 70px; border-bottom: 1px solid #fff;">
        <span style="color: #fff; font-size: 28px; font-weight: bolder;">采购决策驾驶舱</span>
        <select class="pa" style="top: 50%;" name="" id="mySelect"></select>
    </div>
    <div class="main">
        <div class="top">
            <div class="item c1">
                <div id="echart1" style="width: 100%; height: 100%;border: 1px solid #fff;"></div>
            </div>
            <div class="item c1">
                <div class="item-bottom" style="height: 58%; border: 1px solid #fff;">
                    <div style="height: 33%; ">
                        <div class="bottom" style="height: 100%;">
                            <div class="item c1" style="text-align :left;color:#fff;height:100%;width :100%;line-height :100%;font-size:14px;flex:1.5;">
                                析出锌生产计划(金属吨)：
                            </div>
                            <div class="item c1" id="num1" style="text-align:center;color:#fff;height: 100%;width:100%;line-height:100%;font-size:22px;">
                                *****
                            </div>
                        </div>
                    </div>
                    <div style="height: 32%; ">
                        <div class="bottom" style="height: 100%;">
                            <div class="item c1" style="text-align :left;color:#fff;height:100%;width :100%;line-height :100%;font-size:14px;flex:1.5;">
                                <span>锌精矿采购计划(金属吨)：</span>
                            </div>
                            <div class="item c1" id="num3" style="text-align:center;color:#fff;height: 100%;width:100%;line-height:100%;font-size:22px;">
                                *****
                            </div>
                        </div>
                    </div>
                    <div style="height: 33%; ">
                        <div class="bottom" style="height: 100%;">
                            <div class="item c1" style="text-align :left;color:#fff;height:100%;width :100%;line-height :100%;font-size:14px;flex:1.5;">
                                <span>锌精矿采购建议(金属吨)：</span>
                            </div>
                            <div class="item c1" id="num2" style="text-align:center;color:#fff;height: 100%;width:100%;line-height:100%;font-size:22px;">
                                *****
                            </div>
                        </div>
                    </div>
                </div>
                <div class="item-bottom" style="height: 40%;">
                    <div id="echart2" style="width: 100%; height: 100%;border: 1px solid #fff;"></div>
                </div>
            </div>
            <div class="item c1 pr" style="">
                <div id="echart3" style="width: 100%; height: 100%;border: 1px solid #fff;"></div>
                <button class="pa" id="myBtn">价格预测</button>
                <div class="dialog" id="dialog">
                    <ul class="dialog-ul" id="myUL"></ul>
                </div>
            </div>
            
        </div>
        <div class="bottom">
            <div class="item c1">
                <div id="echart7" style="width: 100%; height: 100%;border: 1px solid #fff;"></div>
            </div>
            <div class="item c1">
                <div id="echart4" style="width: 100%; height: 100%;border: 1px solid #fff;"></div>
            </div>
            <div class="item c1">
                <div id="echart5" style="width: 100%; height: 100%;border: 1px solid #fff;"></div>
            </div>
            <div class="item c1">
                <div id="echart6" style="width: 100%; height: 100%;border: 1px solid #fff;"></div>
            </div>
            
            @*<div class="item c1">
                <div id="echart8" style="width: 100%; height: 100%;border: 1px solid #fff;"></div>
            </div>*@
            @*<div class="item c1" >
                <div style="height: 30%;">
                    <div class="bottom" style="height: 100%;">
                        <div class="item c1" style="text-align :center;color:#fff;height:100%;width :100%;line-height :100%;font-size:15px;">
                            析出锌生产计划(金属吨)：
                        </div>
                        <div class="item c1" id="num1" style="text-align:center;color:#fff;height: 100%;width:100%;line-height:100%;font-size:22px;">
                            *****
                        </div>
                    </div>
                </div>
                <div style="height: 30%; ">
                    <div class="bottom" style="height: 100%;">
                        <div class="item c1" style="text-align :center;color:#fff;height:100%;width :100%;line-height :100%;font-size:15px;">
                            <span>锌精矿采购计划(金属吨)：</span>
                        </div>
                        <div class="item c1" id="num3" style="text-align:center;color:#fff;height: 100%;width:100%;line-height:100%;font-size:22px;">
                            *****
                        </div>
                    </div>
                </div>
                <div style="height: 30%; ">
                    <div class="bottom" style="height: 100%;">
                        <div class="item c1" style="text-align :center;color:#fff;height:100%;width :100%;line-height :100%;font-size:15px;">
                            <span>锌精矿采购建议(金属吨)：</span>
                        </div>
                        <div class="item c1" id="num2" style="text-align:center;color:#fff;height: 100%;width:100%;line-height:100%;font-size:22px;">
                            *****
                        </div>
                    </div>
                </div>
            </div>*@
        </div>
    </div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var echart1 = echarts.init(document.getElementById("echart1"));
        var echart2 = echarts.init(document.getElementById("echart2"));
        var echart3 = echarts.init(document.getElementById("echart3"));
        var echart4 = echarts.init(document.getElementById("echart4"));
        var echart5 = echarts.init(document.getElementById("echart5"));
        var echart6 = echarts.init(document.getElementById("echart6"));
        var echart7 = echarts.init(document.getElementById("echart7"));
        //var echart8 = echarts.init(document.getElementById("echart8"));

        // 指定图表的配置项和数据
        var option1 = {
            title: {
                text: "价值分析",
                textStyle: {
                    color: "aqua",
                },
                subtext: "锌产品",
                subtextStyle: {
                    color: "aqua",
                    align: "right",
                },
            },
            tooltip: {
                trigger: "axis",
            },
            legend: {
                data: ["#0锌锭", "#1锌锭", "#0火炬"],
                textStyle: {
                    color: "#fff",
                },
                bottom: 0,
            },
            grid: {
                left: "3%",
                right: "4%",
                bottom: "10%",
                containLabel: true,
            },
            toolbox: {
                feature: {
                    // saveAsImage: {},
                },
            },
            xAxis: {
                type: "category",
                boundaryGap: false,
                data: [
                  "2019-05-27",
                  "2019-10-10",
                  "2019-12-12",
                  "2020-05-05",
                  "2020-06-05",
                  "2020-06-15",
                  "2020-06-20",
                ],
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: "#ffffff", //更改坐标轴文字颜色
                        fontSize: 14, //更改坐标轴文字大小
                    },
                },
            },
            yAxis: {
                type: "value",
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: "#ffffff", //更改坐标轴文字颜色
                        fontSize: 14, //更改坐标轴文字大小
                    },
                },
                min: 10000
            },
            series: [
              {
                  name: "#0锌锭",
                  type: "line",
                  // stack: "总量",
                  data: [120, 132, 101, 134, 90, 230, 210],
              },
              {
                  name: "#1锌锭",
                  type: "line",
                  // stack: "总量",
                  data: [220, 182, 191, 234, 290, 330, 310],
              },
              {
                  name: "#0火炬",
                  type: "line",
                  // stack: "总量",
                  data: [150, 232, 201, 154, 190, 330, 410],
              },
            ],
        };

        var option2 = {
            title: {
                text: "锌精矿月采购量分析",
                textStyle: {
                    color: "red",
                },
                left: "center",
                top: "20px",
            },
            tooltip: {
                trigger: "item",
            },
            grid: {
                left: "-3%",
                right: "1%",
                bottom: "0%",
                containLabel: true,
            },
            xAxis: {
                type: "category",
                splitLine: {
                    show: false,
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: "#ffffff", //更改坐标轴文字颜色
                        fontSize: 14, //更改坐标轴文字大小
                    },
                },
                data: [
                  "201907",
                  "201908",
                  "201909",
                  "201910",
                  "201911",
                  "201912",
                  "202001",
                ],
            },
            yAxis: {
                type: "value",
                show: false,
            },
            series: [
              {
                  data: [120, 200, 150, 80, 70, 110, 130],
                  type: "bar",
                  itemStyle: {
                      normal: {
                          //这里是重点
                          color: function (params) {
                              //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                              var colorList = [
                                "#1AADFD",
                                "#1AADFD",
                                "#1AADFD",
                                "#1AADFD",
                                "#1AADFD",
                                "#1AADFD",
                                "#1AADFD",
                              ];
                              return colorList[params.dataIndex];
                          },
                      },
                  },
              },
            ],
        };

        var option3 = {
            title: {
                text: "价值分析",
                textStyle: {
                    color: "aqua",
                },
                subtext: "加工费",
                subtextStyle: {
                    color: "aqua",
                    align: "right",
                },
            },
            tooltip: {
                trigger: "axis",
            },
            // Modify-S
            grid: {
                left: "3%",
                // right: "4%",
                bottom: "0%",
                containLabel: true,
            },
            // Modify-E
            xAxis: {
                type: "category",
                boundaryGap: false,
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: "#ffffff", //更改坐标轴文字颜色
                        fontSize: 14, //更改坐标轴文字大小
                    },
                },
                data: [
                  "2016-11",
                  "2017-11",
                  "2018-11",
                  "2019-11",
                  "2020-01",
                  "2020-05",
                  "2020-06",
                ],
            },
            yAxis: {
                type: "value",
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: "#ffffff", //更改坐标轴文字颜色
                        fontSize: 14, //更改坐标轴文字大小
                    },
                },
            },
            series: [
              {
                  data: [820, 932, 901, 934, 1290, 1330, 1320],
                  type: "line",
                  smooth: true,
                  lineStyle: {
                      color: "#5295C7",
                  },
                  itemStyle: {
                      color: "#5295C7",
                  },
                  areaStyle: {
                      color: "#3A6B8F",
                  },
              },
            ],
        };

        var option4 = {
            tooltip: {
                formatter: "{a} <br/>{b} : {c}%",
            },
            toolbox: {
                // feature: {
                //     restore: {},
                //     saveAsImage: {}
                // }
            },
            series: [
              {
                  name: "业务指标",
                  type: "gauge",
                  max: 0,
                  // clockwise: false,
                  detail: {
                      formatter: "0#锌锭\n\n{value}\n\n库存",
                      textStyle: {
                          fontSize: 16,
                          color: "aqua",
                      },
                  },
                  axisLine: {
                      lineStyle: {
                          color: [
                            [0.9, "#F9CC7F"],
                            [1, "#EEEEEF"],
                          ],
                      },
                  },
                  splitLine: {
                      //分割线样式（及10、20等长线样式）
                      length: 0,
                      lineStyle: {
                          // 属性lineStyle控制线条样式
                          width: 0,
                      },
                  },
                  axisTick: {
                      //刻度线样式（及短线样式）
                      length: 0,
                  },
                  itemStyle: {
                      //指针样式
                      normal: {
                          color: "black",
                      },
                  },
                  pointer: {
                      //指针长度与宽度
                      width: 0,
                      length: "0%",
                  },
                  data: [
                    {
                        value: 0,
                        // name: "锌精矿",

                        itemStyle: {
                            color: "aqua",
                        },
                    },
                  ],
              },
            ],
        };

        var option5 = {
            tooltip: {
                formatter: "{a} <br/>{b} : {c}%",
            },
            toolbox: {
                // feature: {
                //     restore: {},
                //     saveAsImage: {}
                // }
            },
            series: [
              {
                  name: "业务指标",
                  type: "gauge",
                  max: 0,
                  // clockwise: false,
                  detail: {
                      formatter: "1#_2#锌锭\n\n{value}\n\n库存",
                      textStyle: {
                          fontSize: 16,
                          color: "aqua",
                      },
                  },
                  axisLine: {
                      lineStyle: {
                          color: [
                            [0.9, "#F9940E"],
                            [1, "#EEEEEF"],
                          ],
                      },
                  },
                  splitLine: {
                      //分割线样式（及10、20等长线样式）
                      length: 0,
                      lineStyle: {
                          // 属性lineStyle控制线条样式
                          width: 0,
                      },
                  },
                  axisTick: {
                      //刻度线样式（及短线样式）
                      length: 0,
                  },
                  itemStyle: {
                      //指针样式
                      normal: {
                          color: "black",
                      },
                  },
                  pointer: {
                      //指针长度与宽度
                      width: 0,
                      length: "0%",
                  },
                  data: [
                    {
                        value: 0,
                        // name: "锌精矿",

                        itemStyle: {
                            color: "aqua",
                        },
                    },
                  ],
              },
            ],
        };

        var option6 = {
            //title: {
            //    text: "价值分析",
            //    textStyle: {
            //        color: "aqua",
            //    },
            tooltip: {
                formatter: "{a} <br/>{b} : {c}%",
            },
            toolbox: {
                // feature: {
                //     restore: {},
                //     saveAsImage: {}
                // }
            },
            series: [
              {
                  name: "业务指标",
                  type: "gauge",
                  max: 0,
                  // clockwise: false,
                  detail: {
                      formatter: "热镀锌合金\n\n{value}\n\n库存",
                      textStyle: {
                          fontSize: 16,
                          color: "aqua",
                      },
                  },
                  axisLine: {
                      lineStyle: {
                          color: [
                            [0.9, "#BCC43C"],
                            [1, "#EEEEEF"],
                          ],
                      },
                  },
                  splitLine: {
                      //分割线样式（及10、20等长线样式）
                      length: 0,
                      lineStyle: {
                          // 属性lineStyle控制线条样式
                          width: 0,
                      },
                  },
                  axisTick: {
                      //刻度线样式（及短线样式）
                      length: 0,
                  },
                  itemStyle: {
                      //指针样式
                      normal: {
                          color: "black",
                      },
                  },
                  pointer: {
                      //指针长度与宽度
                      width: 0,
                      length: "0%",
                  },
                  data: [
                    {
                        value: 0,
                        // name: "锌精矿",

                        itemStyle: {
                            color: "aqua",
                        },
                    },
                  ],
              },
            ],
        };

        var option7 = {
            tooltip: {
                formatter: "{a} <br/>{b} : {c}%",
            },
            toolbox: {
                // feature: {
                //     restore: {},
                //     saveAsImage: {}
                // }
            },
            series: [
              {
                  name: "业务指标",
                  type: "gauge",
                  max: 0,
                  // clockwise: false,
                  detail: {
                      formatter: "锌精矿\n\n{value}\n\n库存",
                      textStyle: {
                          fontSize: 16,
                          color: "aqua",
                      },
                  },
                  axisLine: {
                      lineStyle: {
                          color: [
                            [0.8, "#c23531"],
                            [1, "#fff"],
                          ],
                      },
                  },
                  splitLine: {
                      //分割线样式（及10、20等长线样式）
                      length: 0,
                      lineStyle: {
                          // 属性lineStyle控制线条样式
                          width: 0,
                      },
                  },
                  axisTick: {
                      //刻度线样式（及短线样式）
                      length: 0,
                  },
                  itemStyle: {
                      //指针样式
                      normal: {
                          color: "black",
                      },
                  },
                  pointer: {
                      //指针长度与宽度
                      width: 0,
                      length: "0%",
                  },
                  data: [
                    {
                        value: 0,
                        // name: "锌精矿",

                        itemStyle: {
                            color: "aqua",
                        },
                    },
                  ],
              },
            ],
        };

        var option8 = {
            tooltip: {
                formatter: "{a} <br/>{b} : {c}%",
            },
            toolbox: {
                // feature: {
                //     restore: {},
                //     saveAsImage: {}
                // }
            },
            series: [
              {
                  name: "业务指标",
                  type: "gauge",
                  max: 0,
                  // clockwise: false,
                  detail: {
                      formatter: "粗锌\n\n{value}\n\n库存",
                      textStyle: {
                          fontSize: 16,
                          color: "aqua",
                      },
                  },
                  axisLine: {
                      lineStyle: {
                          color: [
                            [0.9, "#F9940E"],
                            [1, "#EEEEEF"],
                          ],
                      },
                  },
                  splitLine: {
                      //分割线样式（及10、20等长线样式）
                      length: 0,
                      lineStyle: {
                          // 属性lineStyle控制线条样式
                          width: 0,
                      },
                  },
                  axisTick: {
                      //刻度线样式（及短线样式）
                      length: 0,
                  },
                  itemStyle: {
                      //指针样式
                      normal: {
                          color: "black",
                      },
                  },
                  pointer: {
                      //指针长度与宽度
                      width: 0,
                      length: "0%",
                  },
                  data: [
                    {
                        value: 0,
                        // name: "锌精矿",

                        itemStyle: {
                            color: "aqua",
                        },
                    },
                  ],
              },
            ],
        };
        // 使用刚指定的配置项和数据显示图表。
        echart1.setOption(option1);
        echart2.setOption(option2);
        echart3.setOption(option3);
        echart4.setOption(option4);
        echart5.setOption(option5);
        echart6.setOption(option6);
        echart7.setOption(option7);
        //echart8.setOption(option8);

        $(document).ready(function () {
            var Product = {
                init: function () {
                    this.apiUrl = "../../Api/Cgl/";
                    // this.apiUrl = "http://39.106.120.139:8091/Api/Cgl/";
                    this.ZnPriceList = "ZnPriceList";
                    this.Znprocess = "Znprocess";
                    this.TwoNumber = "TwoNumber";
                    this.FiveNumber = "FiveNumber";
                    this.MonthArrival = "MonthArrival";
                    this.ZnYuCe = "ZnYuCe";
                    this.renderYearMonth(2)
                    this.renderUL()
                    this.initDialog()
                    this.getZnPriceList();
                    this.getZnprocess();
                    this.getFiveNumber();
                    this.getTwoNumber();
                    this.getMonthArrival();
                    this.getZnYuCe();
                },
                getZnPriceList: function () {
                    var _this = this;
                    $.ajax({
                        //请求方式
                        type: "GET",
                        //请求的媒体类型
                        contentType: "application/json;charset=UTF-8",
                        //请求地址
                        url: _this.apiUrl + this.ZnPriceList,
                        //数据，json字符串
                        // data: JSON.stringify(list),
                        //请求成功
                        success: function (result) {
                            console.log(result);
                            if (Number(result.code) === 0) {
                                option1.xAxis.data = result.data;
                                option1.series[0].data = result.price0zn;
                                option1.series[1].data = result.price1zn;
                                option1.series[2].data = result.zntorch;
                                echart1.setOption(option1);
                            }
                        },
                        //请求失败，包含具体的错误信息
                        error: function (e) {
                            console.log(e.status);
                            console.log(e.responseText);
                        },
                    });
                },
                getZnprocess: function () {
                    var _this = this;
                    $.ajax({
                        //请求方式
                        type: "GET",
                        //请求的媒体类型
                        contentType: "application/json;charset=UTF-8",
                        //请求地址
                        url: _this.apiUrl + this.Znprocess,
                        //数据，json字符串
                        // data: JSON.stringify(list),
                        //请求成功
                        success: function (result) {
                            console.log(result);
                            if (Number(result.code) === 0) {
                                option3.xAxis.data = result.data;
                                option3.series[0].data = result.znprocess;
                                echart3.setOption(option3);
                            }
                        },
                        //请求失败，包含具体的错误信息
                        error: function (e) {
                            console.log(e.status);
                            console.log(e.responseText);
                        },
                    });
                },
                getZnPriceList: function () {
                    var _this = this;
                    $.ajax({
                        //请求方式
                        type: "GET",
                        //请求的媒体类型
                        contentType: "application/json;charset=UTF-8",
                        //请求地址
                        url: _this.apiUrl + this.ZnPriceList,
                        //数据，json字符串
                        // data: JSON.stringify(list),
                        //请求成功
                        success: function (result) {
                            console.log(result);
                            if (Number(result.code) === 0) {
                                option1.xAxis.data = result.data;
                                option1.series[0].data = result.price0zn;
                                option1.series[1].data = result.price1zn;
                                option1.series[2].data = result.zntorch;
                                echart1.setOption(option1);
                            }
                        },
                        //请求失败，包含具体的错误信息
                        error: function (e) {
                            console.log(e.status);
                            console.log(e.responseText);
                        },
                    });
                },
                getZnPriceList: function () {
                    var _this = this;
                    $.ajax({
                        //请求方式
                        type: "GET",
                        //请求的媒体类型
                        contentType: "application/json;charset=UTF-8",
                        //请求地址
                        url: _this.apiUrl + this.ZnPriceList,
                        //数据，json字符串
                        // data: JSON.stringify(list),
                        //请求成功
                        success: function (result) {
                            console.log(result);
                            if (Number(result.code) === 0) {
                                option1.xAxis.data = result.data;
                                option1.series[0].data = result.price0zn;
                                option1.series[1].data = result.price1zn;
                                option1.series[2].data = result.zntorch;
                                echart1.setOption(option1);
                            }
                        },
                        //请求失败，包含具体的错误信息
                        error: function (e) {
                            console.log(e.status);
                            console.log(e.responseText);
                        },
                    });
                },
                getFiveNumber: function () {
                    var _this = this;
                    $.ajax({
                        //请求方式
                        type: "GET",
                        //请求的媒体类型
                        contentType: "application/json;charset=UTF-8",
                        //请求地址
                        url: _this.apiUrl + this.FiveNumber,
                        //数据，json字符串
                        // data: JSON.stringify(list),
                        //请求成功
                        success: function (result) {
                            console.log(result);
                            if (Number(result.code) === 0) {
                                option4.series[0].data[0].value = result.zn0;
                                option5.series[0].data[0].value = result.zn1;
                                option6.series[0].data[0].value = result.zn2;
                                option7.series[0].data[0].value = result.jinzn;
                                option8.series[0].data[0].value = result.cuzn;
                                echart4.setOption(option4);
                                echart5.setOption(option5);
                                echart6.setOption(option6);
                                echart7.setOption(option7);
                                //echart8.setOption(option8);
                            }
                        },
                        //请求失败，包含具体的错误信息
                        error: function (e) {
                            console.log(e.status);
                            console.log(e.responseText);
                        },
                    });
                },
                getTwoNumber: function (year, mon) {
                    var _this = this;
                    $.ajax({
                        //请求方式
                        type: "Get",
                        //请求的媒体类型
                        contentType: "application/json;charset=UTF-8",
                        //请求地址
                        url: _this.apiUrl + this.TwoNumber,
                        //数据，json字符串
                        data: {
                            year: year || new Date().getFullYear(),
                            month: mon || new Date().getMonth() + 1,
                        },
                        //请求成功
                        success: function (result) {
                            console.log(result);
                            if (Number(result.code) === 0) {
                                // TODO
                                document.getElementById("num1").innerHTML = result.znxichu;
                                document.getElementById("num2").innerHTML = result.znjinkuang;
                                document.getElementById("num3").innerHTML = result.znjinkuang1;
                            }
                        },
                        //请求失败，包含具体的错误信息
                        error: function (e) {
                            console.log(e.status);
                            console.log(e.responseText);
                        },
                    });
                },
                getMonthArrival: function () {
                    var _this = this;
                    $.ajax({
                        //请求方式
                        type: "GET",
                        //请求的媒体类型
                        contentType: "application/json;charset=UTF-8",
                        //请求地址
                        url: _this.apiUrl + this.MonthArrival,
                        //请求成功
                        success: function (result) {
                            console.log("MonthArrival", result);
                            if (result.date) {
                                option2.xAxis.data = result.date;
                                option2.series[0].data = result.montharrival;
                                echart2.setOption(option2);
                            }
                        },
                        //请求失败，包含具体的错误信息
                        error: function (e) {
                            console.log(e.status);
                            console.log(e.responseText);
                        },
                    });
                },
                getZnYuCe: function () {
                    var _this = this;
                    $.ajax({
                        //请求方式
                        type: "GET",
                        //请求的媒体类型
                        contentType: "application/json;charset=UTF-8",
                        //请求地址
                        url: _this.apiUrl + this.ZnYuCe,
                        //请求成功
                        success: function (result) {
                            console.log("ZnYuCe", result);
                            if (result.date && result.num) {
                                _this.renderUL(result.date, result.num)
                                // option2.xAxis.data = result.date
                                // option2.series[0].data = result.montharrival
                                // echart2.setOption(option2);
                            }
                        },
                        //请求失败，包含具体的错误信息
                        error: function (e) {
                            console.log(e.status);
                            console.log(e.responseText);
                        },
                    });
                },
                initDialog: function () {
                    var _this = this
                    $('#myBtn').off().on('click', function () {
                        $('#dialog').show()
                        if (_this.timer) {
                            clearTimeout(_this.timer)
                        }
                        _this.timer = setTimeout(function () {
                            $('#dialog').hide()
                        }, 3000)
                    })
                },
                renderYearMonth(num) {
                    var dateList = this.getYearMonth(num)
                    var _dateHTML = ''
                    var _this = this
                    dateList.reverse().map(function (item, index) {
                        console.log(item)
                        _dateHTML += '<option value=' + item + '>' + item + '</option>'
                    })
                    document.getElementById('mySelect').innerHTML = _dateHTML
                    $('#mySelect').on('change', function () {
                        console.log($(this).children('option:selected').val())
                        var selected = $(this).children('option:selected').val()
                        _this.getTwoNumber(selected.split('-')[0], parseFloat(selected.split('-')[1]))
                    })

                },
                getYearMonth: function (num) {
                    var _Date = new Date()
                    var nowYear = new Date().getFullYear()
                    var nowMonth = _Date.getMonth() + 1
                    nowMonth = nowMonth < 10 ? '0' + nowMonth : nowMonth
                    var oldYear = nowYear - num
                    var Timeslot = oldYear + '-' + nowMonth + ' - ' + nowYear + '-' + nowMonth
                    console.log(Timeslot)
                    var resultArray = [];
                    var arrstr = Timeslot.split(" - ");

                    var ksYear = arrstr[0].trim().substring(0, 4);
                    var ksMonth = arrstr[0].trim().substring(5, 7);

                    var jsYear = arrstr[1].trim().substring(0, 4);
                    var jsMonth = arrstr[1].trim().substring(5, 7);

                    var tYear = parseInt(ksYear);

                    for (var i = 0; i <= jsYear - ksYear; i++) {
                        var eMonth = 12;
                        var sMonth = 1;

                        if (ksYear == jsYear) {
                            eMonth = jsMonth;
                            sMonth = ksMonth;
                        } else if (i == jsYear - ksYear) {
                            // 最后一次循环
                            eMonth = jsMonth;
                        } else if (i == 0) {
                            // 第一次循环
                            sMonth = ksMonth;
                        }

                        for (var m = sMonth; m <= eMonth; m++) {
                            var mm = m.toString();
                            if (mm.length == 1) {
                                mm = "0" + m.toString();
                            }
                            resultArray.push(tYear + "-" + mm);
                        }

                        tYear = tYear + 1;
                    }
                    return resultArray;
                },
                renderUL: function (date, num) {
                    if (date) {
                        var _liHTML = ''
                        date.map(function (item, index) {
                            _liHTML += '<li><p>' + item + '</p><p>' + num[index] + '</p></li>'
                        })
                        $('#myUL').html(_liHTML)
                    }
                },
            };
            Product.init();
        });
    </script>
</body>
</html>
<!-- $.ajax({
  //请求方式
  type: "POST",
  //请求的媒体类型
  contentType: "application/json;charset=UTF-8",
  //请求地址
  url: "http://127.0.0.1/admin/list/",
  //数据，json字符串
  data: JSON.stringify(list),
  //请求成功
  success: function (result) {
    console.log(result);
  },
  //请求失败，包含具体的错误信息
  error: function (e) {
    console.log(e.status);
    console.log(e.responseText);
  },
});
}, -->
